<template>
	<div class="sbDetail">
		<!-- v-if="userStatus != 0 && userStatus!=1" -->
		<div class="inviteIndexItems">
			<div class="inviteIndexItems_left">
				所属区域
			</div>
			<div class="inviteIndexItems_right" @click='froolShow = true'>
				<input type="text" value="" v-model='from.address'  disabled placeholder="请输入" />
			</div>
		</div>

		<div class="inviteIndexItems" v-if="type!=2">
			<div class="inviteIndexItems_left">
				报修类型
			</div>
			<div class="inviteIndexItems_right" @click="showSexSB = true; hideKeyboard()">
				<!-- <input type="text" value="" placeholder="请输入性别" /> -->
				<u--input v-model="from.types" disabled disabledColor="#ffffff" placeholder="请选择设备类型"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right" color='#c0c4cc'></u-icon>
			</div>
		</div>


		<div class="inviteIndexItems" v-if="type!=2">
			<div class="inviteIndexItems_left">
				故障描述
			</div>
			<div class="inviteIndexItems_right">
				<input type="text" value="" v-model='from.content' placeholder="请输入" />
			</div>
		</div>

		<div class="inviteIndexItems" v-if="type!=2">
			<div class="inviteIndexItems_left">
				服务人员
			</div>
			<div class="inviteIndexItems_right" @click='froolShowR = true'>
				<input type="text" value="" v-model='from.nickname' disabled placeholder="请输入" />
				<u-icon slot="right" name="arrow-right" color='#c0c4cc'></u-icon>
			</div>
		</div>

		<div class="inviteIndexItems">
			<div class="inviteIndexItems_left">
				方便上门时间
			</div>
			<div class="inviteIndexItems_right" @click='show=true'>
				<input type="number" value="" v-model='from.time' disabled placeholder="请输入" />
				<u-icon slot="right" name="arrow-right" color='#c0c4cc' @click='show=true'></u-icon>
			</div>
		</div>
		<!-- <div class="inviteIndexItems" style="height: 240rpx;">
			<div class="inviteIndexItems_left">
				备注
			</div>
			<div class="inviteIndexItems_right">
				<div class="invite_cont_yy">
					<textarea v-model='remark' placeholder="请填写备注(最多50字)" />
				</div>

			</div>
		</div>
 -->

		<div class="inviteUpdate">
			上传照片 </div>
		<div class="inviteUpdate_img">
			<div class="inviteUpdate_left" @click='UpImg(1)'>
				<image :src="ite" mode="" v-if="image" v-for='(ite,idx) in image' :key="idx"></image>
				<image src="https://wx.sjcmhz.com/static/image/upload.png" mode="" v-if='image.length<=4'></image>
			</div>
		</div>

		<!--  -->
		<frool v-if="froolShow" :froolShow='froolShow' @confirm='FroolConfirm' @cancel='froolShow=false'></frool>
		<!-- btn -->
		<!-- 提交 -->
		<div class="inviteIndexItems_btn sbDetailbtn" @click='inviteSureEvent()'>
			提交
		</div>
		<!-- 	<u-action-sheet :show="showSex" :actions="actions" title="请选择" @close="showSex = false" @select="sexSelect">
		</u-action-sheet> -->

		<!-- <u-action-sheet :show="showSex" :actions="typeList" title="请选择" @close="showSex = false" @select="sexSelect">
		</u-action-sheet> -->
		<u-calendar :show="show" mode="range" @confirm="confirm" @close='show=false' @cancel='false'></u-calendar>
		<div style="height: 400rpx;overflow-y: scroll;">
			<u-picker :show="showSexSB" :columns="actionsSB" title="请选择" @cancel="showSexSB = false"
				@confirm="sexSelectSB">
			</u-picker>
			<!-- <u-picker :show="show" :columns="columns"></u-picker> -->
		</div>

		<frools v-if="froolShowR" :froolShow='froolShowR' :isCen='2' @confirm='FroolConfirmR' @cancel='froolShowR=false'
			:isNick='true'>
		</frools>

	</div>
</template>

<script>
	import frools from '@/pages/server/components/frools.vue'
	import frool from '@/pages/server/components/frool.vue'
	export default {
		components: {
			frools,
			frool
		},
		data() {
			return {
				froolShow: false,
				from: {},
				show: false,
				showSex: false,
				showSexSB: false,
				froolShowR: false,
				equipment_id: '',
				from: {

				},
				tabIndex: 0,
				serverType: 1,
				userStatus: '',
				showType: false,
				typeList: [{

				}],
				image: [],
				actions: [],
				actionsSB: [],
				// ①马桶 ②灯具 ③地漏 ④门锁 ⑤下水管道 ⑥门 ⑦窗 ⑧其他 
				actions1: [
					["留夜灯", '拉快递', '其他']
				],
				type: '',
				remark: ''
			}
		},
		onLoad(opt) {
			this.type = opt.type
			this.actionsSB = this.actions1
			// this.addressEvnet()
			console.log('actionsSB', this.actionsSB)
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.from.time = e[0] + "~" + e[e.length - 1]
				this.show = !this.show
			},
			async getRoomEdits() {
				const {
					data
				} = await this.$request(this.$Api.roomEdits, {
					equipment_id: this.equipment_id
				}, "POST")
				if (data.code !== 0) return
				this.from = data.data
			},
			// 上传图片
			UpImg(index) {
				var that = this
				uni.chooseImage({
					count: 4,
					sourceType: ['camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.thumbnail = tempFilePaths
						that.UpList(index, that.thumbnail)
					}
				});
			},
			UpList(index, file) {
				var that = this
				that.$utils.UpdataImg(file, (res) => {
					console.log("resssssss", res)
					that.image = that.image.concat(res)
				})
			},
			hideKeyboard() {

			},
			sexSelect(e) {
				console.log("e.name", e.name, )
				var that = this
				that.$set(that.from, 'teacher', e.name)
			},
			sexSelectSB(e) {
				console.log("e.name", e, )
				var that = this
				that.$set(that.from, 'types', e.value[0])
				this.showSexSB = false
			},
			// 新增设备
			async inviteSureEvent() {
				const params = this.from
				if (this.type == 1) {
					params.type = '设施报修'
				} else if (this.type == 2) {
					params.type = '精品保洁'
				} else {
					params.type = '自定义工单'
				}
				params.images = JSON.stringify(this.image)
				params.remark = this.remark
				const {
					data
				} = await this.$request(this.$Api.workPuts, params, "POST")
				if (data.code !== 0) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				setTimeout((res) => {
					uni.navigateBack()
				}, 800)
			},
			async inviteSureEventAdd() {
				const {
					data
				} = await this.$request(this.$Api.roomAdd, this.from, "POST")
				if (data.code !== 0) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})

				uni.navigateBack()
			},
			async FroolConfirm(e) {
				console.log('FroolConfirmFroolConfirm', e)
				// room_name:this.room_name,floor_name:this.floor_name,storey_name:this.storey_name
				this.from.address = e.floor_name + ' ' + e.storey_name + " " + e.room_name
				this.from.room_id = e.room_id
				this.from.storey_id = e.storey_id
				this.from.floor_id = e.floor_id
				this.froolShow = false
			},
			FroolConfirmR(e) {
				this.from.nickname = e.nickname
				this.$set(this.from, 'nickname', e.nickname)
				console.log('FroolConfirm(e) {', e)
			}
		},
	}
</script>

<style lang="less">
	.sbDetail {
		padding: 24rpx 0;
	}

	.sbDetailbtn {
		position: fixed;
		bottom: 0;
		background: #2D60FF;

	}

	.inviteUpdate {
		font-size: 30rpx;
		line-height: 94rpx;
		padding: 0 44rpx;


	}


	.inviteIndexItems_btn {
		width: 750rpx;
		height: 100rpx;
		background: #2D60FF;
		line-height: 100rpx;
		font-size: 30rpx;
		text-align: center;
		color: #fff;
	}

	.inviteIndexItems {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 750rpx;
		min-height: 100rpx;
		border-bottom: 1rpx solid #eee;
		background: #fff;
		padding: 0 44rpx;
		box-sizing: border-box;

		.inviteIndexItems_left {
			color: #494949;
			font-size: 30rpx;
			width: 240rpx;
		}

		.inviteIndexItems_right {
			color: #999999;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			width: calc(100% - 240rpx);
		}
	}

	.inviteIndexItems_title {
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 44rpx;
		font-size: 30rpx;

	}

	.invite_cont_yy {
		width: 100%;
		height: 224rpx;

		font-size: 28rpx;
		padding: 16rpx 22rpx;
		box-sizing: border-box;
		color: #666666;

		textarea {
			height: 100%;
			background: #F5F5F5;
			width: 100%;
			padding: 16rpx 22rpx;
			box-sizing: border-box;
		}
	}
</style>